<template>
  <div class="page-navbar">
    <!-- navbar -->
    <mt-navbar class="page-part" v-model="selected">
      <mt-tab-item id="valid">有效票</mt-tab-item>
      <mt-tab-item id="Invalid">无效票</mt-tab-item>
    </mt-navbar>

    <!-- tabcontainer -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="valid">
        <div id="valid_ticket" class="ticket" >
          <ul  v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="20">
            <!-- <li class="audience">
              <div class="leftl">
              </div>
              <div class="rightl">
                <h3>签到证件</h3>
                <p>中国（广州）国际建筑装饰博览会</p>
                <p class="time">2017.09.01-2017.09.02</p>
                <span>点击查看</span>
                <span class="arrows">></span>
              </div>
            </li>

            <li class="lotto">
              <div class="leftl">
              </div>
              <div class="rightl">
                <h3>抽奖机会</h3>
                <p>iphone 7 plus 64G金色手机一台</p>
                <p class="time">2017.09.01-2017.09.02</p>
                <span>点击抽奖</span>
                <span class="arrows">></span>
              </div>
            </li> -->

            <li class="prize" v-for="item in items">
              <div class="leftl">
              </div>
              <div class="rightl">
                <h3>领奖凭证</h3>
                <p>iphone 7 plus 64G金色手机一台</p>
                <p class="time">2017.09.01-2017.09.02</p>
                <span>点击查看</span>
                <span class="arrows">></span>
              </div>
            </li>
          </ul>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="Invalid">
        <section id="Invalid_ticket" class="ticket">
          <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="20">
            <li class="lose" v-for="item in items">
              <div class="leftl">
              </div>
              <div class="rightl">
                <h3>领奖凭证</h3>
                <p>iphone 7 plus 64G金色手机一台</p>
                <p class="time">2017.09.01-2017.09.02</p>
                <span>点击查看</span>
                <span class="arrows">></span>
              </div>
            </li>
          </ul>
        </section>
      </mt-tab-container-item>
    </mt-tab-container>

  </div>
</template>
<script>


import { my_ticket_api } from 'src/servise/getData';
 
export default {
  name: 'page-navbar',

  
  data() {
    return {
      selected: 'valid',
   
      items: '',
      newdata:''
    };
  },

  created() {







    
    let that = this;
    this.$http.get(my_ticket_api)
      .then(
      (res) => {
        that.items = res.data.data;
        console.log(that.items)
      }
      )
      .catch((err) =>
        console.log(err)
      );
  },


  methods: {

    loadMore() {
     this.loading = true;
      setTimeout(() => {
        let that = this;
        this.$http.get( my_ticket_api ).then(
          (res) =>that.newdata=res.data.data
          )
            this.items = this.items.concat(this.newdata);
      }, 100);
    }
  }
};

</script>
<style lang="stylus" scoped>
    body
      background-color #F3F3F3
      background-color #F3F3F3 !important
    .mint-tab-item-label
      font-size 17px
    .page-navbar .is-selected{
      border-bottom:none !important;
    }
    section 
      ul 
        overflow scroll
    .mint-tab-container
      width 94% 
      margin 0 auto
     .ticket
      padding-top: 0.0966rem;  
     .ticket li
      display flex
      flex-flow row
      border-radius: 8px;
      position relative
      margin-top 0.4348rem
      padding-bottom 0.4106rem
      .leftl
          width: 18%;
          height 2.3913rem
          
      .rightl
          flex 1
          height 2.3913rem
          color #fff
          padding-left 3%
          padding-top 0.2174rem 
          h3 
            font-size 20px
            color #fff 
          p
            font-size 14px
            color #fff
            margin-top 0.0966rem  
            overflow hidden 
            text-overflow ellipsis
            white-space nowrap
            width 7.0048rem
          .time 
            font-size 12px
            margin-top 0.0483rem 
          span 
            color #fff 
            position absolute
            bottom 0.2899rem
            right 0.6763rem
            color #fff 
            font-size 12px
           
          .arrows  
            color #fff 
            position absolute
            bottom 0.2174rem
            right 0.314rem
            color #fff 
            font-size 18px
    .audience
      // box-shadow:0px 4px 4px #ccc;
      // background: linear-gradient(to right, #FDAD4E , #F19321); /* 标准的语法 */
      background url('~images/audience.png') 
      background-size 100% 100%
    .lotto
      background url('~images/lotto.png') 
      background-size 100% 100%        
    .prize
      background url('~images/prize.png') 
      background-size 100% 100%
    .lose
      background url('~images/lose.png') 
      background-size 100% 100%
    .mint-navbar .mint-tab-item {
    padding: 0.2899rem 0;
    font-size: 15px;
     }  
      
     .mint-navbar .mint-tab-item 
        padding 0.3865rem 0
        font-size  15px
      
    .mint-navbar 
         border-bottom:1px solid #fff;
         box-shadow:0px 0px 6px 5px rgba(136, 136, 136, 0.2);;


       
</style>

